<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!doctype html>
<html class="no-js">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>沃店</title>
    <!-- Set render engine for 360 browser -->
    <meta name="renderer" content="webkit">
    <!-- No Baidu Siteapp-->
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <!-- Add to homescreen for Chrome on Android -->
    <meta name="mobile-web-app-capable" content="yes">
    <!-- Add to homescreen for Safari on iOS -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="Amaze UI"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/css/amazeui.min
.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/css/app.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/css/index.css">
    <!--必要样式-->
    <style type="text/css">
        body {
            background-color: #fff;
        }

        .order {
            padding: 10px 0;
        }
        .am-tabs-nav li {
            padding: 0 20px;
        }
    </style>
</head>

<body>
<header data-am-widget="header" class="am-header am-header-default am-header-fixed">
    <div class="am-header-left am-header-nav">
        <a href="${pageContext.request.contextPath}/clientHome/goHallManage" class="">
            <i class="am-header-icon am-icon-chevron-left"></i>
        </a>
    </div>
    <h1 class="am-header-title">
        <a href="#title-link" class="">
            换卡订单
        </a>
    </h1>
</header>
<div class="am-g">
    <div class="clearpadding am-u-sm-12">
        <div data-am-widget="tabs" class="clearmargin am-tabs am-tabs-d2">
            <ul class="am-tabs-nav am-cf" style="overflow-y: scroll;">
                <li class="am-active" style="padding: 0 20px;" onclick="getOrderAll()"><a href="[data-tab-panel-0]">所有订单</a></li>
                <li class="" style="padding: 0 20px;"><a href="[data-tab-panel-1]" onclick="getOrderAccept()">待接单</a></li>
                <li class="" style="padding: 0 20px;"><a href="[data-tab-panel-2]" onclick="getDecoraterAccept()">待指派人员接单</a></li>
                <li class="" style="padding: 0 20px;"><a href="[data-tab-panel-3]" onclick="getOrderInsert()">待配送</a></li>
                <li class="" style="padding: 0 20px;"><a href="[data-tab-panel-4]" onclick="getOrderComment()">待评价</a></li>
                <li class="" style="padding: 0 20px;"><a href="[data-tab-panel-5]" onclick="getOrderCommented()">已评价</a></li>
            </ul>
            <div class="am-tabs-bd" style="margin-top: 13px;">
                <div data-tab-panel-0 class="am-tab-panel am-active" style="padding-bottom:0px;" id="orderAll">
                    <div class="am-g order" v-for="item in items">
                        <a :href="'${pageContext.request.contextPath}/clientHallOrder/detail?hallOrderId='+item.id">
                            <div class="am-u-sm-3">
                                <img src="${pageContext.request.contextPath}/images/1357847b6b52ce1.png" style="">
                            </div>
                            <div class="am-u-sm-5" style="margin-top: -8px;">
                                <span style="font-size: 13px;color:#1C1C1C">{{item.realName}}</span><br>
                                <span style="font-size:10px;color:#D7D7D7;"><i class="am-icon-phone"></i>{{item.contractPhone}}</span><br>
                                <span style="font-size:10px;color:#D7D7D7;"><i class="am-icon-map-marker"></i>{{item.address}}</span><br>
                            </div>
                            <div class="am-u-sm-4" style="margin-top: -8px;">
                                <span style="font-size: 10px;color:#D7D7D7;float: right;">{{item.createTime}}</span><br><br>
                                <span style="float: right;" v-if="item.statu == 40">待接单</span>
                                <span style="float: right;" v-if="item.statu == 46">待指定配送人员</span>
                                <span style="float: right;" v-if="item.statu == 41">待配送</span>
                                <span style="float: right;" v-if="item.statu == 43">待支付</span>
                                <span style="float: right;" v-if="item.statu == 44">待评价</span>
                                <span style="float: right;" v-if="item.statu == 45">已完成</span>

                            </div>
                            <hr class="clearpadding clearmargin am-u-sm-12" style="margin-top: 10px;">
                        </a>
                    </div>

                </div>
                <div data-tab-panel-1 class="am-tab-panel " style="padding-bottom:0px;" id="orderAccept">
                    <div class="am-g order" v-for="item in items">
                        <a :href="'${pageContext.request.contextPath}/clientHallOrder/detail?hallOrderId='+item.id">
                            <div class="am-u-sm-3">
                                <img src="${pageContext.request.contextPath}/images/1357847b6b52ce1.png" style="">
                            </div>
                            <div class="am-u-sm-5" style="margin-top: -8px;">
                                <span style="font-size: 13px;color:#1C1C1C">{{item.realName}}</span><br>
                                <span style="font-size:10px;color:#D7D7D7;"><i class="am-icon-phone"></i>{{item.contractPhone}}</span><br>
                                <span style="font-size:10px;color:#D7D7D7;"><i class="am-icon-map-marker"></i>{{item.address}}</span><br>
                            </div>
                            <div class="am-u-sm-4" style="margin-top: -8px;">
                                <span style="font-size: 10px;color:#D7D7D7;float: right;">{{item.createTime}}</span><br><br>
                                <img src="${pageContext.request.contextPath}/images/accept.png" alt=""
                                     style="float: right;">
                            </div>
                            <hr class="clearpadding clearmargin am-u-sm-12" style="margin-top: 10px;">
                        </a>
                    </div>
                </div>

                <div data-tab-panel-1 class="am-tab-panel " style="padding-bottom:0px;" id="decoraterAccept">
                    <div class="am-g order" v-for="item in items">
                        <a :href="'${pageContext.request.contextPath}/clientHallOrder/detail?hallOrderId='+item.id">
                            <div class="am-u-sm-3">
                                <img src="${pageContext.request.contextPath}/images/1357847b6b52ce1.png" style="">
                            </div>
                            <div class="am-u-sm-5" style="margin-top: -8px;">
                                <span style="font-size: 13px;color:#1C1C1C">{{item.realName}}</span><br>
                                <span style="font-size:10px;color:#D7D7D7;"><i class="am-icon-phone"></i>{{item.contractPhone}}</span><br>
                                <span style="font-size:10px;color:#D7D7D7;"><i class="am-icon-map-marker"></i>{{item.address}}</span><br>
                            </div>
                            <div class="am-u-sm-4" style="margin-top: -8px;">
                                <span style="font-size: 10px;color:#D7D7D7;float: right;">{{item.createTime}}</span><br><br>
                            </div>
                            <hr class="clearpadding clearmargin am-u-sm-12" style="margin-top: 10px;">
                        </a>
                    </div>
                </div>

                <div data-tab-panel-2 class="am-tab-panel " style="padding-bottom:0px;" id="orderInsert">
                    <div class="am-g order" v-for="item in items">
                        <a :href="'${pageContext.request.contextPath}/clientHallOrder/detail?hallOrderId='+item.id">
                            <div class="am-u-sm-3">
                                <img src="${pageContext.request.contextPath}/images/1357847b6b52ce1.png" style="">
                            </div>
                            <div class="am-u-sm-5" style="margin-top: -8px;">
                                <span style="font-size: 13px;color:#1C1C1C">{{item.realName}}</span><br>
                                <span style="font-size:10px;color:#D7D7D7;"><i class="am-icon-phone"></i>{{item.contractPhone}}</span><br>
                                <span style="font-size:10px;color:#D7D7D7;"><i class="am-icon-map-marker"></i>{{item.address}}</span><br>
                            </div>
                            <div class="am-u-sm-4" style="margin-top: -8px;">
                                <span style="font-size: 10px;color:#D7D7D7;float: right;">{{item.createTime}}</span><br><br>

                            </div>
                            <hr class="clearpadding clearmargin am-u-sm-12" style="margin-top: 10px;">
                        </a>
                    </div>
                </div>
                <div data-tab-panel-3 class="am-tab-panel " style="padding-bottom:0px;" id="orderComment">
                    <div class="am-g order" v-for="item in items">
                        <a :href="'${pageContext.request.contextPath}/clientHallOrder/detail?hallOrderId='+item.id">
                            <div class="am-u-sm-3">
                                <img src="${pageContext.request.contextPath}/images/1357847b6b52ce1.png" style="">
                            </div>
                            <div class="am-u-sm-5" style="margin-top: -8px;">
                                <span style="font-size: 13px;color:#1C1C1C">{{item.realName}}</span><br>
                                <span style="font-size:10px;color:#D7D7D7;"><i class="am-icon-phone"></i>{{item.contractPhone}}</span><br>
                                <span style="font-size:10px;color:#D7D7D7;"><i class="am-icon-map-marker"></i>{{item.address}}</span><br>
                            </div>
                            <div class="am-u-sm-4" style="margin-top: -8px;">
                                <span style="font-size: 10px;color:#D7D7D7;float: right;">{{item.createTime}}</span><br><br>

                            </div>
                            <hr class="clearpadding clearmargin am-u-sm-12" style="margin-top: 10px;">
                        </a>
                    </div>
                </div>

                <div data-tab-panel-3 class="am-tab-panel " style="padding-bottom:0px;" id="orderCommented">
                    <div class="am-g order" v-for="item in items">
                        <a :href="'${pageContext.request.contextPath}/clientHallOrder/detail?hallOrderId='+item.id">
                            <div class="am-u-sm-3">
                                <img src="${pageContext.request.contextPath}/images/1357847b6b52ce1.png" style="">
                            </div>
                            <div class="am-u-sm-5" style="margin-top: -8px;">
                                <span style="font-size: 13px;color:#1C1C1C">{{item.realName}}</span><br>
                                <span style="font-size:10px;color:#D7D7D7;"><i class="am-icon-phone"></i>{{item.contractPhone}}</span><br>
                                <span style="font-size:10px;color:#D7D7D7;"><i class="am-icon-map-marker"></i>{{item.address}}</span><br>
                            </div>
                            <div class="am-u-sm-4" style="margin-top: -8px;">
                                <span style="font-size: 10px;color:#D7D7D7;float: right;">{{item.createTime}}</span><br><br>

                            </div>
                            <hr class="clearpadding clearmargin am-u-sm-12" style="margin-top: 10px;">
                        </a>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
<!--[if (gte IE 9)|!(IE)]><!-->
<script src="${pageContext.request.contextPath}/assets/js/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/amazeui.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/vue.js"></script>
<script type="text/javascript">
    var orderAll = new Vue({
        el: "#orderAll",
        data: {
            items: []
        }
    });
    var orderAccept = new Vue({
        el: "#orderAccept",
        data: {
            items: []
        }
    });

    var decoraterAccept = new Vue({
        el: "#decoraterAccept",
        data: {
            items: []
        }
    });

    var orderInsert = new Vue({
        el: "#orderInsert",
        data: {
            items: []
        }
    });
    var orderComment = new Vue({
        el: "#orderComment",
        data: {
            items: []
        }
    });

    var orderCommented = new Vue({
        el: "#orderCommented",
        data: {
            items: []
        }
    });

    $(function () {
        getOrderAll();
    });


    function getOrderAll() {
        var status = [40, 46, 41, 42, 43, 44, 45];
        $.ajax({
            type: "get",
            data: {
                'status': status
            },
            url: '${pageContext.request.contextPath}/clientHallOrder/findHallOrder',
            traditional: true,//这里设置为true
            dataType: 'json',
            success: function (data) {

                if (data.success == true && data.code == 200) {
                    orderAll.items = data.obj;

                }
            }

        });
    }
    function getOrderAccept() {
        var status = [40];
        $.ajax({
            type: "get",
            data: {
                'status': status

            },
            url: '${pageContext.request.contextPath}/clientHallOrder/findHallOrder',
            traditional: true,//这里设置为true
            dataType: 'json',
            success: function (data) {

                if (data.success == true && data.code == 200) {
                    orderAccept.items = data.obj;

                }
            }

        });
    }

    function getDecoraterAccept() {
        var status = [46];
        $.ajax({
            type: "get",
            data: {
                'status': status
            },
            url: '${pageContext.request.contextPath}/clientHallOrder/findHallOrder',
            traditional: true,//这里设置为true
            dataType: 'json',
            success: function (data) {

                if (data.success == true && data.code == 200) {
                    decoraterAccept.items = data.obj;

                }
            }

        });

    }

    function getOrderCommented() {
        var status = [45];

        $.ajax({
            type: "get",
            data: {
                'status': status
            },
            url: '${pageContext.request.contextPath}/clientHallOrder/findHallOrder',
            traditional: true,//这里设置为true
            dataType: 'json',
            success: function (data) {

                if (data.success == true && data.code == 200) {
                    orderCommented.items = data.obj;

                }
            }

        });

    }


    function getOrderInsert() {
        var x = orderInsert.items;
        var status = [41];
        $.ajax({
            type: "get",
            data: {
                'status': status
            },
            url: '${pageContext.request.contextPath}/clientHallOrder/findHallOrder',
            traditional: true,//这里设置为true
            dataType: 'json',
            success: function (data) {

                if (data.success == true && data.code == 200) {
                    orderInsert.items = data.obj;

                }
            }

        });
    }
    function getOrderComment() {
        var status = [44];
        $.ajax({
            type: "get",
            data: {
                'status': status
            },
            url: '${pageContext.request.contextPath}/clientHallOrder/findHallOrder',
            traditional: true,//这里设置为true
            dataType: 'json',
            success: function (data) {

                if (data.success == true && data.code == 200) {
                    orderComment.items = data.obj;

                }
            }

        });
    }
</script>
</body>

</html>
